<template>
  <el-container>
    <el-container>
      <el-aside width="210px">
        <el-row style="width: 190px;">
          <el-col :span="24" style="background-color: #019BA0;width:200px;height: 35px;text-align:auto;color: #FFFFFF;"><div class="grid-content" style="text-align: left;font-size: 24px;">设备属性管理</div></el-col>
          <el-col :span="24">
            <el-tabs tab-position="left" style="width:200px;height: 100%;" @tab-click="clickTab">
                  <el-tab-pane v-for="menu1 in menu" :key="menu1.id" :name="menu1.id+''" :label="menu1.name"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data(){
      return{
         menu:[],
      }
    },
    methods: {
        getAllMenu(){
          this.axios.get("device/getAllMenu").then(res=>{
            this.menu=res.data.data;
          })
        },
        clickTab(tab,event){ //标签页点击跳转路由
          let id=parseInt(tab.name);
          this.$router.push("/device/"+id);
        }
    },
    created(){
       this.getAllMenu();
    }
  }
</script>

<style scoped="scoped">

  .el-container {
    margin: 0;
    padding: 0;
    margin-top:5px;
    margin-left: 5px;
    width:1300px;
    height:640px;
  }
  .el-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border:5px solid #F3F3F3;
    text-align: center;
  }

  .el-main {
    margin: 0;
    padding: 0;
    margin-left:3px;
    border:5px solid #F3F3F3;
    background-color: #ffffff;
    color: #333;
  }
  .is-left{
    font-size: 20px;
  }

</style>
